import { UserProfilesAPI } from '../../request/api';
export default {
    // 1. 设置命名空间
    namespaced: true,
    // 共享数据
    state: {
        // 用户信息
        userInfo: {
            // 昵称
            nickName: '',
            // 积分--鸡腿数
            coin: 0,
            // 用户头像
            headImg: require(`../../assets/img/userImg.f8bbec5e.png`),
        },
        // 购物车总数
        cartTotal: 0,
    },
    mutations: {
        // 修改是否显示登录模态框状态
        changeUserInfo(state, payload) {
            // console.log('修改vuex中用户信息', payload);
            state.userInfo = payload.userInfo;
            state.cartTotal = payload.cartTotal;
        },
        // 初始化
        initUserInfo(state) {
            // console.log('初始化信息了....');
            state.userInfo = {
                // 昵称
                nickName: '--',
                // 积分--鸡腿数
                coin: '--',
                // 用户头像
                headImg: require(`../../assets/img/userImg.f8bbec5e.png`),
            };
            state.cartTotal = 0;
        },
    },
    actions: {
        async asyncChangeUserInfo(context) {
            // 1、请求用户信息
            let user = await UserProfilesAPI();
            // console.log('user:', user.data);
            // 2. 调用mutations更新用户信息
            context.commit('changeUserInfo', user.data);
        },
    },
};
/* 
   1. 刷新之后vuex数据还原了, 回到了默认状态
      原因:vuex缺点, 刷新后, 会还原默认状态, 数据没有持久化

      持久化: 存储在数据库, 本地存储
      解决:
      1. 重新请求数据库数据 ?
      2. 存储到本地 localStorage

      分析: 刷新-->topbar.vue,created()
      
   2. 登录成功后, 手动删除token, 切换导航时,登录状态变成了未登录,但是用户信息没有还原!!
      更新登录状态: 通过组件重载, app.vue中watch, 会让Topbar.vue重新执行created
      解决: 更新登录状态后, 同时更新用户信息
      如果未登录, 应该将vuex中数据还原

      2.1 在vuex中增加方法, 初始化state数据 initUserInfo
      2.2 更新登录状态后, 同时更新用户信息
          未登录时, 调用initUserInfo

    3. 手机扫码后, 没有更新用户信息
       代码会去到 Topbar.vue中的created代码内
       解决: code==0时, 调用actions方法更新信息
*/
